<template>
  <div class="wrap">
    <!-- 等待匹配 -->
    <waitBox v-if="showWaitBox" :matchBtn="matchBtn" @reStart="reStartBtn" @cancleMatch="matchCancle" @timeOut="matchTimeOut"></waitBox>
    <!-- 匹配成功 -->
    <match v-if="showMatch" :userList="userList" @matchClose="matchClose"></match>
    <!-- 开始答题 -->
    <questionBox v-if="showQuestion" :netWork="netWork" :up="up" :oldGame="oldGame" :otherAns="otherAns" :gameOver="isGameOver" :userList="userList" :subjectList="subjectList" @reStart="reStart" @back="back" @ansRight="rightHandle" @ansFail="failHandle" @end="end" @nextQuestion="nextQuestion"></questionBox>
    <!-- 升星动画 -->
    <div class="result-box" v-if="showStarBox">
      <medalChange :medalInfo="medalInfo" @close="closeStarBox"></medalChange>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import waitBox from "./components/waitBox";
import match from "./components/match";
import questionBox from "./components/questionBox";
import medalChange from "@/components/public/medalChange";

let dataStack = [];
export default {
  name: "game",
  components: {
    waitBox,
    match,
    questionBox,
    medalChange
  },
  data() {
    return {
      showWaitBox: false, //等待匹配
      showMatch: false, //匹配成功
      showQuestion: false, //答题页
      matchTimer: null, //定时器
      matchTime: 10, //倒计时
      gameId: 0, //对局id
      matchBtn: false, // 是否开启匹配倒计时

      subjectList: [], //题目数据列表
      userList: [], //用户数据列表
      type: 0, //会话类型 区分后端传入的数据用于哪种业务处理
      otherAns: [], //其他用户的答案
      reStartBtn: false,
      isGameOver: false,
      oRun: false,
      //升星动画
      medalInfo: {},
      up: false,
      showStarBox: false,
      animated: false,
      showStar: false,
      showCloud: false,
      showCw: false,
      showTip: false,
      showRotate: false,
      showNewMedalImg: false,
      paragraph: 0,
      nowStar: 3,
      maxStar: 3,
      starList: [
        {
          type: false
        },
        {
          type: false
        },
        {
          type: false
        }
      ],
      medalNameList: ["睡", "莲"],
      medalImg: "",
      newAblity: {},
      endType: "success",
      cwWord: "连胜",
      clearList: false, //是否在做清空操作，
      rank: false,
      oldGame: false, //断线重连
      netWork: false, //重连开关,
      heartTimer: null //心跳计时器，维护后台连接
    };
  },

  computed: {
    ...mapState([
      "SESSIONID",
      "appInfo",
      "socketState",
      "gameRecord",
      "isRank",
      "IMGHEAD",
      "cw",
      "openId"
    ])
  },
  methods: {
    ...mapMutations([
      "setSocketState",
      "setUserOneState",
      "setUserTwoState",
      "setCw",
      "setGameRecord",
      "setIsRank",
      "setAppInfo",
      "setAppInfoByItem"
    ]),
    initSocket() {
      //  初始化socket 建立连接
      let type = 2;
      if (this.isRank) {
        type = 1;
      }
      this.fly
        .post("/wsLogin", {
          type: type
        })
        .then(res => {
          console.log(res);
          let url =
            "wss://ggbsq.xingpanwang.com/vientianetest/ws?code=" +
            res.data.Result.code;
          // let url ="ws://192.168.2.238:8008/vientianetest/ws?code=" +res.data.Result.code;
          if (this.isRank) {
            url =
              "wss://ggbsq.xingpanwang.com/vientianetest/wsRank?code=" +
              res.data.Result.code;
            // url = "ws://192.168.2.238:8008/vientianetest/wsRank?code=" + res.data.Result.code;
          }

          wx.connectSocket({
            url: url,
            data: {
              sid: this.SESSIONID
            },
            header: {
              "content-type": "application/json"
            },
            method: "GET"
          });
          this.onSocketOpen();
          this.onSocketError();
        });
    },
    onSocketOpen() {
      //监听socket 连接 成功
      wx.onSocketOpen(res => {
        console.log("WebSocket连接打开");
        // this.heartTimer = setInterval(() => {
        //   this.sendSocketMessage("{'type':0,'data':1} ", "heart");
        // }, 1000);
        this.checkOldGame(); //检测 是否 有未完成游戏
        this.onSocketMessage(); //监听后端数据事件
        this.onSocketClose();
        this.setSocketState(1);
      });
    },
    onSocketClose() {
      wx.onSocketClose(res => {
        // clearInterval(this.heartTimer);
        this.setSocketState(0);
        this.otherAns = [];
      });
    },
    onSocketError() {
      //监听socket 连接 失败
      wx.onSocketError(res => {
        console.log("WebSocket连接打开失败，请检查！");
      });
    },

    sendSocketMessage(msg, from) {
      //发送消息
      if (from) {
        console.log(from);
      }
      try {
        wx.sendSocketMessage({
          data: msg,
          fail: res => {
            console.log("发送失败" + from);
          }
        });
      } catch (err) {
        console.log(err);
      }
    },

    onSocketMessage() {
      //被动接受消息
      wx.onSocketMessage(res => {
        //区分数据类型 处理不同业务
        let data = JSON.parse(res.data);
        switch (data.Type) {
          case 1: //开始匹配
            this.stopMatch(data, "new");
            break;
          case 2: //获取重连数据
            this.checkOldGameHandle(data);
            break;
          case 3: //匹配成功
            break;

          case 4: // 区分是 用户的反馈 或者 对手的答题信息
            console.log(
              data.Result.index +
                "gameId:" +
                data.Result.gameId +
                "type4,seonde:" +
                new Date().getSeconds()
            );
            this.defindInfo(data.Result);
            break;

          case 6:
            console.log("type6");
            break;

          case 5:
            console.log("type5,处理结束游戏断开连接");
            this.gameOver(data);
            break;
          case 7:
            console.log(
              "type7,游戏结束，带有最终信息，包括后续可能添加的经验等"
            );
            this.gameEnd(data);
            break;
        }
      });
    },

    closeSocket() {
      wx.closeSocket({
        success: res => {
          // clearInterval(this.heartTimer);
          console.log("closeSocket");
        }
      });
    },

    //-------------- 匹配相关函数 ----------------------------------
    checkOldGame() {
      this.sendSocketMessage("{'type':2,'data':1} ", "send-startMatch");
    },
    checkOldGameHandle(data) {
      if (data.Result != "") {
        //游戏重连 直接开始游戏
        this.stopMatch(data, "old");
        this.oldGame = true;
      } else {
        this.oldGame = false;
        if (this.showQuestion) {
          //游戏界面中，但是游戏结束了 返回主页
          wx.showToast({
            title: "游戏已结束",
            duration: 1000,
            icon: "none"
          });
          setTimeout(() => {
            this.$router.replace("/pages/entry/index");
          }, 1000);
        } else {
          //开始新游戏
          this.showWaitBox = true;
          setTimeout(() => {
            this.matchBtn = true;
          }, 100);
          this.sendSocketMessage("{'type':1,'data':1} ", "send-startMatch");
        }
      }
    },
    stopMatch(data, type) {
      if (type == "new") {
        //停止匹配
        console.log("停止匹配");
        this.matchBtn = false;
        this.showWaitBox = false;
        this.showMatch = true;
      } else {
        setTimeout(() => {
          if (this.showQuestion) {
            this.netWork = !this.netWork;
          } else {
            this.showQuestion = true;
          }
        }, 0);
      }

      // 初始数据赋值
      this.gameId = data.Result.gameId;
      this.userList = data.Result.userList;
      this.subjectList = data.Result.subjectList;

      // 排位处理
      if (this.isRank) {
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].basicInfo.userId == this.appInfo.userId) {
            // 新结果处理
            this.medalInfo = this.userList[i].abilityInfo;

            this.setCw(this.userList[i].abilityInfo.continueWinNum);

            this.medalNameList = this.userList[
              i
            ].abilityInfo.paragraphName.split(""); //获取名字数组
            this.medalImg =
              this.IMGHEAD + this.userList[i].abilityInfo.paragraphImage;
            this.nowStar = this.userList[i].abilityInfo.star; //当前等级的星数
            this.setBeforeList(this.userList[i].abilityInfo);
            this.paragraph = this.userList[i].abilityInfo.paragraph;
          }
        }
      }

      // beforeData;
    },
    setBeforeList(data) {
      //设置初始状态星级列表
      this.starList = [];
      if (data.paragraph == 1) {
        // 区别特殊等级 1,2 的最大星数
        this.maxStar = 1;
      } else if (data.paragraph == 2) {
        this.maxStar = 2;
      } else {
        this.maxStar = 3;
      }
      for (let i = 0; i < this.maxStar; i++) {
        //初始化星星数量
        if (i < this.nowStar) {
          this.starList.push({
            type: true
          });
        } else {
          this.starList.push({
            type: false
          });
        }
      }
    },

    matchCancle() {
      //取消匹配
      this.matchBtn = false;
      this.showWaitBox = false;
      this.$router.back();
    },
    matchTimeOut() {
      //匹配超时
    },
    // ----------------配对成功 展示页 -------------------------
    matchClose() {
      //展示结束
      this.showMatch = false;
      this.showQuestion = true;
      setTimeout(() => {
        this.ansStart();
      }, 3500);
    },
    ansStart() {
      this.sendSocketMessage(
        `{'type':3,'data':${this.gameId}}`,
        "send-matchClose"
      );
    },
    // ----------------答题处理 -------------------------
    submitAns(obj) {
      //提交答案到后端
      obj.data.gameId = this.gameId;
      obj = JSON.stringify(obj);
      this.sendSocketMessage(obj, "send-submitAns");
    },
    rightHandle(obj) {
      this.submitAns(obj);
    },
    failHandle(obj) {
      this.submitAns(obj);
    },
    nextQuestion() {
      this.otherAns = [];
      this.sendSocketMessage(
        `{'type':6,'data':${this.gameId}}`,
        "send-nextQuestion"
      );
    },
    end() {
      this.otherAns = [];
      this.sendSocketMessage(`{'type':6,'data':${this.gameId}}`, "send-end");
    },
    // ---------------- 反馈处理函数 -------------------------
    defindInfo(data) {
      if (this.gameId == data.gameId) {
        this.otherAns.push(data);
      }
    },
    gameOver(data) {
      //type5 逃跑处理
      this.closeSocket();
      this.isGameOver = !this.isGameOver;
      this.otherAns = [];
      this.oRun = true;
      if (this.isRank) {
        setTimeout(() => {
          this.gameEnd(data);
        }, 1000);
      } else {
        this.up = !this.up;
      }
      wx.showToast({
        title: "对方逃跑了，对局结束",
        icon: "none"
      });
    },
    gameEnd(data) {
      // 游戏结算
      //游戏正常完成
      this.otherAns = [];
      this.setGameRecord(data);
      if (this.isRank) {
        //排位
        let u1, u2;
        // 处理升星动画 结果数据
        // 获取结算状态
        let newResult = {};
        for (let i = 0; i < data.Result.userList.length; i++) {
          if (data.Result.userList[i].basicInfo.userId == this.appInfo.userId) {
            newResult = data.Result.userList[i].abilityInfo;
            // 新结果处理
            this.newAblity = data.Result.userList[i].abilityInfo;

            this.setCw(data.Result.userList[i].abilityInfo.continueWinNum);
            u1 = data.Result.userList[i].abilityInfo.score;
          } else {
            u2 = data.Result.userList[i].abilityInfo.score;
          }
        }
        if (u1 > u2) {
          this.endType = "success";
        } else if (u1 < u2) {
          this.endType = "fail";
        } else {
          this.endType = "balance";
        }
        if (this.oRun) {
          this.endType = "success";
        }
        setTimeout(() => {
          this.up = !this.up;
        }, 1000);

        setTimeout(() => {
          if (this.endType == "success" || this.endType == "fail") {
            //胜利 展示 升星动画
            this.showStarBox = true;
            setTimeout(() => {
              // 新结果处理
              this.medalInfo = newResult;
            }, 1000);
          }
        }, 3300);
      } else {
        setTimeout(() => {
          this.up = !this.up;
        }, 1000);
      }

      this.getInit(); //重置初始化数据
      // 结束后重新获取基础信息
      this.closeSocket();
      console.log("游戏正常结束");
    },
    reStart() {
      Object.assign(this.$data, dataStack.pop());
      this.showQuestion = false;
      this.matchBtn = false;
      this.oRun = false;
      this.otherAns = [];
      this.reStartBtn = !this.reStartBtn;
      this.initSocket();
      this.setUserOneState(false);
      this.setUserTwoState(false);
    },
    getInit() {
      this.fly.post("/init").then(res => {
        if (this.isRank) {
          //排位
          this.setAppInfo(res.data.Result);
        } else {
          //匹配
          this.setAppInfoByItem({
            grade: res.data.Result.grade,
            expValue: res.data.Result.expValue,
            money: res.data.Result.money
          });
        }
      });
    },
    back() {
      this.otherAns = [];
    },
    onNetworkStatusChange() {
      wx.onNetworkStatusChange(res => {
        if (!res.isConnected) {
          wx.showLoading({
            title: "网络连接中",
            mask: true
          });
          try {
            this.closeSocket();
          } catch (err) {
            console.log(err);
          }
        } else {
          this.initSocket();
          wx.hideLoading();
        }
      });
    },
    stopGame() {
      this.$router.back();
    },
    setStarList(data, empty) {
      this.starList = [];
      if (!empty || (empty && this.nowStar != this.maxStar)) {
        for (let i = 0; i < this.maxStar; i++) {
          //初始化星星数量
          if (i < this.nowStar) {
            this.starList.push({
              type: true
            });
          } else {
            this.starList.push({
              type: false
            });
          }
        }
      } else {
        for (let i = 0; i < this.maxStar; i++) {
          //初始化星星数量
          this.starList.push({
            type: false
          });
        }
      }
      if (data.paragraph == 1) {
        // 区别特殊等级 1,2 的最大星数
        this.maxStar = 1;
      } else if (data.paragraph == 2) {
        this.maxStar = 2;
      } else {
        this.maxStar = 3;
      }
    },
    // ------------------升星动画------------
    starStep1() {
      if (this.showStarBox) {
        this.showStar = true; //星星划出
        this.showCloud = true; //云朵划出
        this.showRotate = true;
      }
    },
    starStep2() {
      if (this.showStarBox) {
        if (this.endType == "success" && this.newAblity.continueWinNum >= 3) {
          this.showCw = true; //展示连胜
          // this.cwWord = "连胜";
        } else {
          this.starStep3();
        }
        //  else if (this.endType == "fail") {
        //   this.showCw = true; //展示连胜
        //   this.cwWord = "失败";
        // }
      }
    },
    starStep3() {
      // 1.判断段位变化2.星级变化
      if (this.showStarBox) {
        // 段位变化
        if (this.newAblity.paragraph != this.paragraph) {
          //段位变化  段位小于6 不会有降段的变化
          //清空原有星星
          this.clearList = true; //清空不触发动画4
          if (this.newAblity.paragraph == 2) {
            this.starList = [
              {
                type: false
              },
              {
                type: false
              }
            ];
          } else {
            this.starList = [
              {
                type: false
              },
              {
                type: false
              },
              {
                type: false
              }
            ];
          }
          setTimeout(() => {
            if (this.newAblity.paragraph > this.paragraph) {
              //升段 只有胜利才有可能
              this.clearList = false; //过渡结束 触发动画4
              this.nowStar = this.newAblity.star;
              if (this.nowStar == 0) {
                //升段后0星 需要主动触发后续动作
                this.starStep4();
              } else {
                for (let i = 0; i < this.nowStar; i++) {
                  setTimeout(() => {
                    this.starList[i].type = true;
                  }, i * 500);
                }
              }
            } else if (this.newAblity.paragraph < this.paragraph) {
              //降段
              this.clearList = false; //过渡结束 触发动画4
              this.starList = [
                {
                  type: true
                },
                {
                  type: true
                },
                {
                  type: true
                }
              ]; //降段 只有全满
            }
          }, 500);
        } else {
          //段位没有变化

          if (this.endType == "success") {
            //升星
            let time = 0;
            for (let i = this.nowStar; i < this.newAblity.star; i++) {
              setTimeout(() => {
                this.starList[i].type = true;
                time++;
              }, time * 500); //时间 待优化
            }
          } else if (this.endType == "fail") {
            //降星  不降段 0星 手动触发下一步
            for (let i = this.maxStar; i > this.newAblity.star; i--) {
              setTimeout(() => {
                this.starList[i - 1].type = false;
              }, parseInt(i - this.maxStar) * 500);
            }
            if (this.paragraph < 6) {
              this.starStep4();
            }
          }
        }
      }
    },
    starStep4() {
      if (this.showStarBox && !this.animated && !this.clearList) {
        this.showTip = true;
        this.showNewMedalImg = true;
        this.medalNameList = this.newAblity.paragraphName.split("");
        this.animated = true;
        this.oRun = false;
        this.rank = false;
      }
    },
    closeStarBox() {
      this.showStarBox = false;
      this.showCw = false;
      this.showTip = false;
      this.showStar = false;
      this.showCloud = false;
      this.showRotate = false;
      this.showNewMedalImg = false;
      this.animated = false;
      // this.up = !this.up;
    }
  },

  // ---------------- 实例生命周期 -------------------------

  mounted() {
    this.onNetworkStatusChange();
  },
  onHide() {
    //断开连接
    this.closeSocket();
  },
  onShow() {
    //断网重连处理
    if (this.$root.$mp.query.rankGame) {
      this.setIsRank(true);
    }
    this.initSocket();
  },
  onLoad(options) {
    dataStack.push({
      ...this.$data
    });
  },
  onUnload() {
    console.log("onUnload");
    try {
      this.sendSocketMessage(`{'type':5,'data':${this.gameId}}`);
      this.closeSocket();
    } catch (err) {
      console.log(err);
    }
    Object.assign(this.$data, dataStack.pop());
    this.showQuestion = false;
    this.showWaitBox = false;
    this.matchBtn = false;
    this.oldGame = false;
    this.otherAns = [];
    this.setUserOneState(false);
    this.setUserTwoState(false);
    this.setIsRank(false);
    this.closeStarBox();
  },
  onShareAppMessage: function(res) {
    return {
      title: "万象大考",
      // imageUrl: shareConfig.url,
      path: "/pages/entry/index",
      success: res => {
        // 转发成功
        console.log(res);
      },
      fail: function(res) {
        // 转发失败
        console.log(res);
      }
    };
  }
};
</script>

<style lang="scss" scoped>
@import url("../../scss/public.scss");
.wrap {
  overflow-x: hidden;
  overflow-y: scroll;
}

.time {
  font-size: 48rpx;
  color: #000;
  margin-bottom: 45rpx;
  line-height: 1;
}

.animate-box {
  width: 572rpx;
  height: 572rpx;
  margin-bottom: 120rpx;
  position: relative;
  & > div {
    position: absolute;
    width: 360rpx;
    height: 360rpx;
    border: 8rpx solid #67c29f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  .cycle-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 184rpx;
      height: 184rpx;
      border: 6rpx solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 20rpx 0rpx rgba(#000, 0.5);
    }
    .ball-box {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      animation: rotate 3s linear infinite;
      .ball {
        width: 34rpx;
        height: 34rpx;
        background: #67c29f;
        border-radius: 50%;
        position: absolute;
        bottom: -17rpx;
        left: 50%;
        margin-left: -17rpx;
      }
    }
  }
  .cycle-2 {
    animation: amplification-1 2s linear infinite;
    border-width: 5rpx;
  }
  .cycle-3 {
    animation: amplification-2 2s linear infinite;
    border-width: 3rpx;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  60% {
    transform: rotate(180deg);
  }
  80% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes amplification-1 {
  0% {
    transform: translate(-50%, -50%) scale(1); // border-width: 8rpx;
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5); // border-width: 5rpx;
    opacity: 0;
  }
}

@keyframes amplification-2 {
  0% {
    transform: translate(-50%, -50%) scale(1); // border-width: 8rpx;
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.1); // border-width: 3rpx;
    opacity: 0;
  }
}

// 升星动画
.show {
  opacity: 1 !important;
}

.rotate {
  animation: rotate2 180s ease infinite;
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(3600deg);
  }
}

.z50 {
  z-index: 50 !important;
}

.star-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: -1;
  transition: all 0.6s ease;
  opacity: 0;
}

.medal {
  .m-name {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
    .name-word {
      width: 82rpx;
      height: 82rpx;
      line-height: 82rpx;
      text-align: center;
      font-size: 42rpx;
      color: #000;
      border: 1rpx solid #ababab;
      box-sizing: border-box;
      border-radius: 50%;
      margin-right: 18rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .m-img {
    position: relative;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .img-rang {
      width: 415rpx;
      height: 415rpx;
    }
    .img-medal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      border: 8rpx solid #5fa288;
      border-radius: 50%;
      display: flex;
      align-items: center;
      width: 320rpx;
      height: 320rpx;
      img {
        width: 312rpx;
        height: 312rpx;
        border-radius: 50%;
        border: 12rpx solid #fff;
        box-sizing: border-box;
        opacity: 0;
        transition: all 1.5s ease;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .old-img {
        z-index: 1;
      }
      .new-img {
        z-index: 1;
      }
    }
  }
  .m-star {
    width: 230rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    .m-mask {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 10;
      div {
        width: 100%;
        height: 100%;
        background: #fff;
        transition: all 0.4s ease;
      }
    }
    .w0 {
      width: 0 !important;
    }
    .star {
      width: 46rpx;
      height: 60rpx;
      margin-right: 33rpx;
      background-size: 46rpx 60rpx;
      background-repeat: no-repeat;
      background-image: url("");
      &:last-child {
        margin-right: 0;
      }
      img {
        width: 46rpx;
        height: 60rpx;
        opacity: 0;
        transition: all 0.6s ease;
        transform: scale(1.5);
      }
      .starActive {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
  .m-cloud {
    position: relative;
    height: 61rpx;
    margin-top: 8rpx;
    margin-bottom: 120rpx;
    text-align: center;
    img {
      width: 181rpx;
      height: 61rpx;
      vertical-align: top;
      opacity: 0;
      transition: all 0.6s ease;
    }
    .cl {
      transform: translateX(-78rpx);
      opacity: 1;
    }
    .cr {
      transform: translateX(78rpx);
      opacity: 1;
    }
  }
  .m-cw {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48rpx;
    color: #777676;
    margin-bottom: 80rpx;
    opacity: 0;
    transition: all 0.6s ease;
    .word {
      padding: 0 15rpx;
      transform: scale(1.3);
      transition: all 0.6s ease;
    }
    .line {
      height: 4rpx;
      width: 120rpx;
      background: #aaaaaa;
    }
  }
  .show {
    .word {
      transform: scale(1);
    }
  }
  .tap-tip {
    font-size: 30rpx;
    color: #aaaaaa;
    text-align: center;
    opacity: 0;
    transition: all 0.6s ease;
  }
}
</style>
